<template>
  <view class="pay-records">
    <view class="header">
      <text class="title">支付记录</text>
    </view>
    
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: currentStatus === '' }" @click="filterByStatus('')">
        全部
      </view>
      <view class="filter-item" :class="{ active: currentStatus === '1' }" @click="filterByStatus('1')">
        支付成功
      </view>
      <view class="filter-item" :class="{ active: currentStatus === '2' }" @click="filterByStatus('2')">
        支付失败
      </view>
      <view class="filter-item" :class="{ active: currentStatus === '0' }" @click="filterByStatus('0')">
        待支付
      </view>
    </view>
    
    <view class="records-list">
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="records.length === 0" class="empty">
        <image src="/static/empty-order.png" mode="aspectFit" class="empty-img"></image>
        <text class="empty-text">暂无支付记录</text>
      </view>
      
      <view v-else class="record-item" v-for="record in records" :key="record.paymentId" @click="goToDetail(record)">
        <view class="record-header">
          <text class="order-no">订单号：{{ record.orderNo }}</text>
          <text class="status" :class="getStatusClass(record.paymentStatus)">
            {{ getStatusText(record.paymentStatus) }}
          </text>
        </view>
        
        <view class="record-content">
          <view class="amount">
            <text class="currency">¥</text>
            <text class="price">{{ record.paymentAmount }}</text>
          </view>
          <view class="info">
            <text class="method">{{ record.paymentMethod === 'WXPAY' ? '微信支付' : record.paymentMethod }}</text>
            <text class="time">{{ formatTime(record.createTime) }}</text>
          </view>
        </view>
        
        <view class="record-footer">
          <text class="payment-no">支付单号：{{ record.paymentNo }}</text>
        </view>
      </view>
    </view>
    
    <view v-if="hasMore && !loading" class="load-more" @click="loadMore">
      <text>加载更多</text>
    </view>
  </view>
</template>

<script>
import { payService } from '@/services/pay.js'

export default {
  data() {
    return {
      records: [],
      loading: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 10,
      currentStatus: ''
    }
  },
  
  onLoad() {
    this.loadRecords()
  },
  
  onPullDownRefresh() {
    this.refresh()
  },
  
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },
  
  methods: {
    async loadRecords() {
      if (this.loading) return
      
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        
        if (this.currentStatus !== '') {
          params.paymentStatus = this.currentStatus
        }
        
        const res = await payService.getPaymentRecords(params)
        
        if (res.success) {
          if (this.currentPage === 1) {
            this.records = res.data.list || []
          } else {
            this.records = [...this.records, ...(res.data.list || [])]
          }
          
          this.hasMore = res.data.list && res.data.list.length === this.pageSize
        } else {
          uni.showToast({
            title: res.message || '获取支付记录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取支付记录失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    
    async refresh() {
      this.currentPage = 1
      this.hasMore = true
      await this.loadRecords()
    },
    
    async loadMore() {
      this.currentPage++
      await this.loadRecords()
    },
    
    filterByStatus(status) {
      this.currentStatus = status
      this.refresh()
    },
    
    goToDetail(record) {
      uni.navigateTo({
        url: `/pages/pay/record-detail?paymentId=${record.paymentId}`
      })
    },
    
    getStatusClass(status) {
      const statusMap = {
        0: 'pending',
        1: 'success',
        2: 'failed',
        3: 'closed',
        4: 'refunded'
      }
      return statusMap[status] || 'unknown'
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '支付成功',
        2: '支付失败',
        3: '已关闭',
        4: '已退款'
      }
      return statusMap[status] || '未知状态'
    },
    
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-records {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    background-color: #fff;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .filter-bar {
    display: flex;
    background-color: #fff;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    
    .filter-item {
      flex: 1;
      text-align: center;
      padding: 15rpx 0;
      font-size: 28rpx;
      color: #666;
      border-radius: 25rpx;
      margin: 0 10rpx;
      
      &.active {
        background-color: #007aff;
        color: #fff;
      }
    }
  }
  
  .records-list {
    padding: 20rpx;
    
    .loading, .empty {
      text-align: center;
      padding: 100rpx 0;
      color: #999;
      font-size: 28rpx;
    }
    
    .empty-img {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
    
    .record-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .order-no {
          font-size: 28rpx;
          color: #333;
        }
        
        .status {
          font-size: 26rpx;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
          
          &.pending {
            background-color: #fff7e6;
            color: #fa8c16;
          }
          
          &.success {
            background-color: #f6ffed;
            color: #52c41a;
          }
          
          &.failed {
            background-color: #fff2f0;
            color: #ff4d4f;
          }
          
          &.closed {
            background-color: #f5f5f5;
            color: #999;
          }
          
          &.refunded {
            background-color: #e6f7ff;
            color: #1890ff;
          }
        }
      }
      
      .record-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .amount {
          .currency {
            font-size: 24rpx;
            color: #ff4d4f;
          }
          
          .price {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff4d4f;
          }
        }
        
        .info {
          text-align: right;
          
          .method {
            display: block;
            font-size: 26rpx;
            color: #666;
            margin-bottom: 10rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .record-footer {
        .payment-no {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .load-more {
    text-align: center;
    padding: 30rpx;
    color: #666;
    font-size: 28rpx;
  }
}
</style> 